<template>
  <div class="g-bd">
    <div class="m-timeline">
      <div class="m-timeact">
        <div class="activity">
          <img v-lazy="detail.coverPCUrl" alt="" class="img-1">
          <span class="mask"></span>
          <div class="title">
            <h3 class="fc12">{{detail.title}}</h3>
          </div>
          <div class="btnwrap">
            <a href="javascript:;" title="发布动态" >
              <i class="icon-1"></i>
              发动态
            </a>
            <a href="javascript:;" title="发布视频">
              <i class="icon-2"></i>
              发布视频
            </a>
          </div>
          <div class="number">已参与人数：{{detail.participateCount}}</div>
        </div>
        <ul class="cnt">

        </ul>
      </div>
      <div class="timecnt">
        <h2 class="hd2">热门动态</h2>
        <ul class="m-dlist">
          <li v-for="(item,index) in eventList" :key="index">
            <div class="gface">
              <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}" class="ficon" :title="item.user.nickname">
                <img v-lazy="item.user.avatarUrl" alt="">
              </router-link>
            </div>
            <div class="gcnt">
              <div class="dcntc">
                <div class="f-fs1">
                  <router-link :to="{name:'UserDetailView',params:{id:item.user.userId,type:1}}"
                               :title="item.user.nickname"
                               class="s-fc7">{{ item.user.nickname }}</router-link>
                  <span class="new-wrap" v-if="item.user.avatarDetail">
                        <img :src="item.user.avatarDetail.identityIconUrl" alt="">

                      </span>
                  <span class="sep" v-if="item.json.song">分享单曲</span>
                  <span class="sep" v-if="item.json.mv">分享MV</span>
                  <span class="sep" v-if="item.json.resource">分享网页</span>
                  <span class="sep" v-if="item.json.playlist">分享歌单</span>
                </div>
                <div class="time">
                  <a href="#" class="s-fc4">{{ formatDate(item.eventTime) }}</a>
                </div>
                <div class="text" v-html="item.json.msg.replace(/\n/g,'<br>').replaceAll(`#${item.actName}#`,
                `<a href='/Activity?id=${$route.query.id}' style='color: #0c73c2; text-decoration: none;'>#${item.actName}#</a>`)">
<!--                  <router-link :to="{name:'Activity',query:{id:item.actId}}" class="s-fu2">-->
<!--                    {{ '#' + item.actName + '#' }}-->
<!--                  </router-link>-->
                </div>
                <div class="j-flag">
                  <div id="auto-id-T4MuaMrn8TCDdCLh" v-if="item.json.song">
                    <div class="src">
                      <div class="cover">
                            <span class="lnk">
                              <img
                                  :src="item.json.song.album.picUrl"
                                  alt="">

                            </span>
                        <a href="javascript:;" class="ply" @click.prevent="sendSong(item.json.song)" title="播放"></a>
                      </div>
                      <div class="scnt">
                        <h3 class="tit">
                          <router-link :to="{name:'SongDetail',params:{id:item.json.song.id}}" :title="item.json.song.name" class="songname">{{ item.json.song.name }}</router-link>
                        </h3>
                        <h4 class="from">
                          <router-link :to="{name:'Work',params:{id:item.json.song.album.artists[0].id}}" :title="item.json.song.album.artists[0].name">
                            {{ item.json.song.album.artists[0].name }}
                          </router-link>
                        </h4>
                      </div>
                    </div>
                  </div>
                  <div id="auto-id-ngHZrl2s5lTSUMGG" v-if="item.json.playlist">
                    <div class="src">
                      <div class="cover">
                        <router-link class="lnk" :to="{name:'RecommendDetail',params:{id: item.json.playlist.id}}" :title="item.json.playlist.name">
                          <img :src="item.json.playlist.coverImgUrl" alt="">

                        </router-link>
                        <a href="javascript:;" title="播放" class="ply-1" @click.prevent="addSong(item.json.playlist.id)"></a>
                      </div>
                      <div class="scnt">
                        <h3 class="tit">
                              <span class="tag">
                                歌单
                                <i class="icon-7"></i>
                              </span>
                          <router-link :to="{name:'RecommendDetail',params:{id: item.json.playlist.id}}" :title="item.json.playlist.name" class="songname">
                            {{ item.json.playlist.name }}
                          </router-link>
                        </h3>
                        <h4 class="from">
                          <span>by</span>
                          <router-link :to="{name:'UserDetailView',params:{id:item.json.playlist.creator.userId,type:1}}" :title="item.json.playlist.creator.nickname">
                            {{ item.json.playlist.creator.nickname }}
                          </router-link>
                        </h4>
                      </div>
                    </div>
                  </div>
                  <div id="auto-id-DIqHGavM3ntpfMak" v-if="item.pics!==false">
                    <ul class="pics" v-if="liIndex!=index">
                      <li class="img-he" v-if="item.pics.length==1" v-for="(pic,i) in item.pics" :key="i">
                        <img v-lazy="pic.originUrl" alt="">
                      </li>
                      <li :class="i==0||i==3||i==6?'clear':''" v-for="(pic,i) in item.pics" :key="i"
                          v-if="item.pics.length>1" @click="nexPic(pic,i,item.pics,index)">
                        <img v-lazy="pic.squareUrl" alt="" class="img-w">
                      </li>
                    </ul>
                    <div class="showpic" v-if="liIndex==index">
                      <div class="btns">
                        <a href="javascript:;" @click.prevent="liIndex=-1">
                          <i class="icon-1"></i>
                          <span>收起</span>
                        </a>
                        <span class="line">|</span>
                        <a href="javascript:;">
                          <i class="icon-2"></i>
                          <span>查看原图</span>
                        </a>
                        <span class="line">|</span>
                        <a href="javascript:;">
                          <i class="icon-3"></i>
                          <span>下载</span>
                        </a>
                      </div>
                      <div class="slide">
                        <div class="wrap">
                          <img :src="pic" alt="" class="img-12">
                          <span class="left" @click="pre()">
                                <img src="../../assets/左箭头.png" alt="">
                              </span>
                          <span class="right" @click="nex()">
                                <img src="../../assets/右箭头.png" alt="">
                              </span>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div id="auto-id-yLDJquTDtqSkXMbq" v-if="item.json.mv">
                    <div class="src-video">
                      <div class="video">
                        <div class="info">
                          <div class="u-dicn">
                            <p class="f-thide2">
                              <i class="icon-12"></i>
                              <span class="f-pre">{{ item.json.mv.name }}</span>
                              <span class="h12">-
                                    <span>
                                      <a href="#" v-for="(n,p) in item.json.mv.artists">{{ n.name }}
                                      <span v-if="p!=item.json.mv.artists.length-1">/&nbsp;</span>
                                      </a>

                                    </span>
                                  </span>
                            </p>
                          </div>
                          <div class="bottom">
                                <span class="f-fl">
                                  <i class="icon-13"></i>
                                  {{ formatNumber(item.json.mv.playCount) }}
                                </span>
                          </div>
                          <i class="f-alpha"></i>
                        </div>
                        <img
                            :src="item.json.mv.imgurl16v9"
                            alt="" class="img">
                      </div>

                    </div>
                  </div>

                </div>
                <div class="doper">
                  <a href="javascript:;">
                    <i class="icon-1"></i>
                    <span>({{ item.info.likedCount }})</span>
                  </a>
                  <span class="line">|</span>
                  <a href="javascript:;">
                    <span>转发({{ item.info.shareCount }})</span>
                  </a>
                  <span class="line">|</span>
                  <a href="javascript:;">
                    <i class="icon-2"></i>
                    <span>评论({{ item.info.commentCount }})</span>
                  </a>
                </div>
                <div class="arrow"></div>
                <div class="dsup"></div>
                <div class="f-hide"></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import {formatDate} from "@/utils/formatDate";
import {formatNumber} from "@/utils/formatNumber";
import {reqSongListDetail} from "@/http/api";

export default {
  name: "index",
  data(){
      return {
        detail:{},
        eventList:[],
        formatDate: formatDate,
        formatNumber: formatNumber,
        pic: '',
        showImg: true,
        picIndex: 0,
        picList: [],
        follow:[],
        liIndex:-1
  }
  },
  computed:{
    str(){
      return this.detail.title
    }
  },
  methods:{
    async addSong(id) {
      let result = await reqSongListDetail(id)
      let list = result.data.playlist.tracks
      this.$store.commit('track/addMusic', list)
      this.$store.commit('track/SETMUSIC', list[0])
    },
    sendSong(i){
      this.$store.commit('track/SETMUSIC',i)
    },
    nexPic(pic, i, list,index) {
      this.pic = pic.squareUrl
      this.picList = list
      this.picIndex = i
      this.showImg = false
      this.liIndex = index
    },
    nex() {
      if (this.picIndex ==this.picList.length-1) this.picIndex = this.picList.length-2
      this.pic = this.picList[this.picIndex + 1].squareUrl
      this.picIndex += 1
    },
    pre() {
      if (this.picIndex ==0) this.picIndex = 1
      this.pic = this.picList[this.picIndex - 1].squareUrl
      this.picIndex -= 1
    },
    async getDetail() {
      let result = await this.$API.reqHotEventDetail(this.$route.query.id)
      this.detail = result.data.act
    },
    async getEventList() {
      let result = await this.$API.reqHotEvent(this.$route.query.id,20)
      let list = result.data.events
      list.forEach(item => {
        let obj = {
          info: item.info,
          user: item.user,
          json: JSON.parse(item.json),
          tailMark: item.tailMark,
          eventTime: item.eventTime,
          actName: item.actName,
          actId:item.actId,
          pics: item.pics
        }
        this.eventList.push(obj)
      })
    },
  },
  mounted() {
    this.getDetail()
    this.getEventList()
  }
}
</script>

<style scoped lang="less">
.g-bd {
  width: 980px;
  min-height: 700px;
  _height: 700px;
  margin: 0 auto;
  background-color: #fff;
  border: 1px solid #d3d3d3;
  border-width: 0 1px;

  .m-timeline {
    position: relative;
    zoom: 1;
    text-shadow: none;

    .m-timeact {
      position: relative;
      zoom: 1;

      .activity {
        width: auto;
        height: 356px;
        display: block;
        text-align: center;
        position: relative;
        zoom: 1;
        &::after{
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          border: 1px solid rgba(0,0,0,0.1);
          z-index: 100;
          pointer-events: none;
        }

        .img-1 {
          position: absolute;
          top: 0;
          left: 0;
          width: 980px;
          height: 356px;
        }

        .mask {
          top: 0;
          left: 0;
          display: block;
          width: 100%;
          height: 100%;
          position: absolute;
          background-image: url("../../assets/frd_activity_mask.png");
        }

        .title {
          left: 0;
          height: 230px;
          line-height: 230px;
          width: 100%;
          position: absolute;
          display: table-cell;
          vertical-align: middle;

          .fc12 {
            display: inline-block;
            width: 530px;
            font-size: 34px;
            line-height: 1.7;
            padding: 27px 20px 38px;
            vertical-align: middle;
            color: #fff;
            font-weight: normal;
            margin-top: -2px;
            word-break: break-all;
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          }
        }

        .btnwrap {
          left: 0;
          width: 100%;
          height: 100px;
          text-align: center;
          top: 230px;
          position: absolute;

          a {
            position: relative;
            zoom: 1;
            background: rgba(255, 255, 255, 0.95);
            color: #d33333;
            width: 240px;
            margin: 0 15px;
            display: inline-block;
            height: 53px;
            border-radius: 6px;
            font-size: 22px;
            line-height: 53px;
            text-decoration: none;
            text-align: center;
            font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;

            i {
              margin: 16px 8px 0px 0px;
              width: 22px;
              height: 22px;
              display: inline-block;
              vertical-align: top;
              background-image: url("../../assets/frd_dyn_sprite.png");

            }

            .icon-1 {
              background-position: -120px -510px;
            }

            .icon-2 {

              background-position: -150px -510px;
            }
          }
        }

        .number {
          top: 300px;
          width: 100%;
          line-height: normal;
          left: 0;
          right: 0;
          bottom: 0;
          height: 12px;
          padding-bottom: 5px;
          display: table;
          word-break: normal;
          position: absolute;
          font-size: 14px;
          font-family: "Microsoft Yahei", Arial, Helvetica, sans-serif;
          color: #fff;
          opacity: 1;

        }
      }
    }
  }

  .timecnt {
    width: 740px;
    margin: 70px auto 0;
    .hd2{
      padding-bottom: 7px;
      border-bottom: 1px solid #d9d9d9;
      font-size: 14px;
      font-weight: bold;
    }
    .m-dlist {
      position: relative;
      zoom: 1;

      li {
        border-top: none;
        position: relative;
        padding: 20px 0;
        border-bottom: 1px solid #e8e8e9;

        .gface {
          position: absolute;
          left: 0;
          width: 54px;

          .ficon {
            float: left;
            position: relative;
            zoom: 1;
            width: 45px;
            height: 45px;

            img {
              display: block;
              width: 100%;
            }
          }
        }

        .gcnt {
          position: relative;
          zoom: 1;
          margin-left: 55px;
          padding-top: 4px;

          .dcntc {
            .f-fs1 {
              font-size: 14px;

              .s-fc7 {
                color: #0c73c2;
              }

              .new-wrap {
                position: relative;
                display: inline-block;
                width: 15px;
                height: 15px;
                margin: 2px 0 0 2px;
                vertical-align: top;

                img {
                  top: 0;
                  left: 0;
                  width: 15px;
                  height: 15px;
                }
              }

              .sep {
                margin-left: 5px;
                color: #666;
              }
            }

            .time {
              margin-top: 7px;

              .s-fc4 {
                color: #999;
              }
            }

            .text {
              margin-top: 10px;
              line-height: 24px;
              font-size: 14px;
              word-wrap: break-word;
              word-break: break-word;
              white-space: normal;

              .s-fu2 {
                color: #0c73c2;
                text-decoration: none;
              }
            }

            .j-flag {
              #auto-id-T4MuaMrn8TCDdCLh, #auto-id-ngHZrl2s5lTSUMGG {
                width: 685px;
                height: 60px;
                background: #f5f5f5;

                .src {

                  display: block;
                  position: relative;
                  padding: 10px;
                  margin: 4px 0 5px;

                  .cover {
                    position: relative;
                    zoom: 1;
                    width: 40px;
                    height: 40px;
                    float: left;
                    &:hover .ply-1{
                      display: block;
                    }

                    .lnk {
                      display: inline-block;
                      width: 100%;
                      height: 100%;
                      img {
                        width: 40px;
                        height: 40px;
                      }

                    }
                    .ply-1 {
                      display: none;
                      z-index: 200;
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 40px;
                      height: 40px;
                      margin: 0;
                      background-position: -100px -70px;
                      _background-position: 0 0;
                      opacity: 0.8;
                      filter: Alpha(opacity=80);
                      background-image: url("../../assets/frd_dyn_sprite.png");
                    }
                    .ply {
                      display: block;
                      z-index: 200;
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 40px;
                      height: 40px;
                      margin: 0;
                      background-position: -100px -70px;
                      _background-position: 0 0;
                      opacity: 0.8;
                      filter: Alpha(opacity=80);
                      background-image: url("../../assets/frd_dyn_sprite.png");
                    }
                  }

                  .scnt {
                    display: block;
                    position: absolute;
                    top: 10px;
                    left: 60px;
                    right: 30px;
                    height: 40px;
                    line-height: 22px;

                    .tit {
                      font-weight: normal;
                      margin-top: -2px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                      word-wrap: normal;

                      .tag {
                        position: relative;
                        top: -1px;
                        zoom: 1;
                        padding: 0 2px 0 3px;
                        background-position: -110px 0;
                        line-height: 16px;
                        margin-right: 6px;
                        color: #e03f40;
                        display: inline-block;
                        height: 16px;
                        font-size: 12px;
                        background-image: url("../../assets/frd_dyn_sprite.png");

                        .icon-7 {
                          position: absolute;
                          top: 0;
                          right: 0px;
                          display: block;
                          width: 3px;
                          background-position: right 0;
                          height: 16px;
                          font-size: 12px;
                          background-image: url("../../assets/frd_dyn_sprite.png");

                        }
                      }

                      a {
                        color: #333;
                      }
                    }

                    .from {
                      font-weight: normal;
                      color: #666;

                      a {
                        color: #666;
                      }
                    }
                  }
                }
              }

              #auto-id-DIqHGavM3ntpfMak {
                margin-top: 5px;
                width: 569px;
                height: auto;
                overflow: hidden;

                .pics {
                  //display: none;
                  .clear {
                    clear: left;
                  }

                  .img-he {
                    clear: left;
                    width: auto !important;
                    height: auto !important;
                    background-color: transparent;

                    img {
                      min-width: 170px;
                      max-height: 338px;
                      height: auto;
                    }
                  }

                  li {
                    float: left;
                    position: relative;
                    zoom: 1;
                    margin-left: 4px;
                    margin-top: 4px;
                    background-color: #e5e5e5;

                    width: 110px;
                    height: 110px;


                    .img-w {
                      position: absolute;
                      top: 0;
                      left: 0;
                      display: block;
                      width: 110px;
                      height: 110px;
                    }
                  }
                }

                .showpic {
                  //display: none;
                  background: #f5f5f5;
                  height: auto;
                  overflow: hidden;

                  .btns {
                    padding: 12px 0 12px 20px;
                    line-height: normal;

                    .line {
                      color: #ddd;
                      margin: 0 7px 0 10px;
                    }

                    a {
                      color: #666;

                      i {
                        margin: 1px 2px 0 0;
                        display: inline-block;
                        vertical-align: top;
                        background-image: url("../../assets/frd_dyn_sprite.png");

                      }

                      .icon-1 {
                        width: 13px;
                        height: 13px;
                        background-position: -108px -19px;

                      }

                      .icon-2 {
                        width: 13px;
                        height: 13px;
                        background-position: -180px -20px;
                      }

                      .icon-3 {
                        width: 14px;
                        height: 13px;
                        background-position: -45px -58px;
                      }

                      span {

                      }
                    }
                  }

                  .slide {
                    height: auto;
                    overflow: hidden;
                    width: 525px;
                    padding-top: 1px;
                    min-height: 306px;
                    _height: 306px;
                    margin: 0 auto;

                    .wrap {
                      margin-top: 0;
                      position: relative;

                      &:hover .left {
                        display: block;
                      }

                      &:hover .right {
                        display: block;
                      }

                      .left {
                        width: 40px;
                        height: 40px;
                        position: absolute;
                        top: 50%;
                        left: 20px;
                        display: none;
                        cursor: pointer;

                        img {
                          width: 40px;
                          height: 40px;
                        }
                      }

                      .right {
                        cursor: pointer;
                        display: none;
                        position: absolute;
                        top: 50%;
                        right: 20px;
                        width: 40px;
                        height: 40px;

                        img {
                          width: 40px;
                          height: 40px;

                        }
                      }

                      .img-12 {
                        display: block;
                        min-width: 100px;
                        min-height: 100px;
                        max-width: 100%;
                        margin: 0 auto;
                      }
                    }
                  }
                }
              }

              #auto-id-yLDJquTDtqSkXMbq {
                margin-top: 5px;

                .src-video {
                  padding: 0;
                  background: none !important;

                  .video {
                    width: 338px;
                    height: 189px;
                    position: relative;
                    zoom: 1;

                    .info {
                      z-index: 10;
                      left: 0;
                      top: 0;
                      right: 0;
                      bottom: 0;
                      position: absolute;
                      box-sizing: border-box;
                      color: #fff;
                      cursor: pointer;
                      background: rgba(0, 0, 0, 0.1);

                      .u-dicn {
                        width: 100%;
                        box-sizing: border-box;
                        font-size: 12px;
                        line-height: 15px;
                        padding: 10px;
                        height: 100px;
                        background-image: url("../../assets/frd_cover_mask.png");

                        .f-thide2 {
                          max-height: 30px;
                          overflow: hidden;
                          text-overflow: ellipsis;
                          display: -webkit-box;
                          -webkit-box-orient: vertical;
                          -webkit-line-clamp: 2;

                          .icon-12 {
                            margin-right: 4px;
                            width: 21px;
                            height: 12px;
                            background-position: 0 -210px;
                            display: inline-block;
                            vertical-align: top;
                            background-image: url("../../assets/frd_dyn_sprite.png");
                          }

                          .f-pre {
                            word-wrap: break-word;
                            word-break: break-all;
                            width: 100%;
                            box-sizing: border-box;
                            font-size: 12px;
                            line-height: 15px;
                            padding: 10px;
                            height: 100px;
                          }

                          .h12 {
                            color: rgba(255, 255, 255, 0.5);

                            a {
                              color: rgba(255, 255, 255, 0.5);
                            }
                          }
                        }
                      }

                      .bottom {
                        position: absolute;
                        left: 0;
                        right: 0;
                        bottom: 0;
                        padding: 33px 10px 10px;
                        height: 10px;
                        line-height: 10px;
                        font-size: 14px;
                        background-image: url("../../assets/frd_cover_mask.png");
                        display: inline-block;
                        vertical-align: top;

                        .f-fl {
                          float: left;

                          .icon-13 {
                            width: 8px;
                            height: 10px;
                            background-position: -50px -510px;
                            margin-right: 13px;
                            display: inline-block;
                            vertical-align: top;
                            background-image: url("../../assets/frd_dyn_sprite.png");
                          }
                        }
                      }

                      .f-alpha {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        margin: -20px 0 0 -20px;
                        opacity: 0.8;
                        width: 40px;
                        height: 40px;
                        background-position: 0 -510px;
                        background-image: url("../../assets/frd_dyn_sprite.png");
                      }
                    }
                  }

                  .img {
                    display: block;
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }

            .doper {
              margin: 18px 0 -2px;
              text-align: right;
              line-height: normal;

              .line {
                color: #c7c7c7;
                margin: 0 10px 0 12px;
              }

              a {
                color: #0c73c2;

                span {
                  color: #0c73c2;
                }

                .icon-1 {
                  margin: 0px 3px 0 0;
                  width: 14px;
                  height: 14px;
                  background-position: 0 -20px;
                  display: inline-block;
                  vertical-align: top;
                  background-image: url("../../assets/frd_dyn_sprite.png");
                }
              }
            }

            .arrow {

            }

            .dsup {
            }

            .f-hide {

            }
          }
        }
      }
    }
  }
}
</style>